<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../content/common/layui/css/layui.css">
    <link rel="stylesheet" href="../content/default/css/zk-index.css">
</head>

<body>
    <div class="iframe-content clear">
        <div class="tree-nav left">
            <div class="search">
                <input type="text">
            </div>
            <div id="tree"></div>
        </div>
        <div class="right-content left">
            <div class="right-content-header clear">
                <ul class="clear listTab_ul left">
                    <li class="left">
                        <img src="../content/default/image/zk/dianli.png" alt="">
                        <span>电力板块</span>:<strong>10</strong></strong></li>
                    <li class="left">
                        <img src="../content/default/image/zk/meitan.png" alt="">
                        <span>煤炭板块</span>:<strong>10</strong></li>
                    <li class="left active">
                        <img src="../content/default/image/zk/zhuangbei.png" alt="">
                        <span>装备制造</span>:<strong>10</strong></li>
                    <li class="left">
                        <img src="../content/default/image/zk/project.png" alt="">
                        <span>工程建设</span>:<strong>10</strong></li>
                </ul>
                <div class="left border-left">重大隐患总数：<strong>10</strong></div>
            </div>
            <div class="filter-section">
                <dl class="clear addClick">
                    <dt class="left">隐患状态：</dt>
                    <dd class="active left mr20">全部</dd>
                    <dd class="left mr20">待完善</dd>
                    <dd class="left mr20">待整改</dd>
                    <dd class="left mr20">待验收</dd>
                    <dd class="left mr20">待审核</dd>
                    <dd class="left mr20">待复查</dd>
                    <dd class="left mr20">待验收</dd>
                    <dd class="left mr20">已关闭</dd>
                </dl>
                <dl class="clear addClick">
                    <dt class="left">隐患来源：</dt>
                    <dd class="active left mr20">全部</dd>
                    <dd class="left mr20">集团层级</dd>
                    <dd class="left mr20">直属单位层级</dd>
                    <dd class="left mr20">基层单位层级</dd>
                </dl>
                <dl class="clear">
                    <dt class="left">选择日期：</dt>
                    <dd class="left">
                        <input type="text" id="startTime">
                    </dd>
                    <dd class="left">~</dd>
                    <dd class="left">
                        <input type="text" id="endTime">
                    </dd>
                </dl>
                <div class="clear filter-title-section">
                    <dl class="filter-title left">
                        <dt>已选条件：</dt>
                        <dd>
                            集团层级<img src="../content/default/image/zk/close.png" alt=""></span>
                        </dd>
                    </dl>
                    <div class="delete-all left">
                        清除
                    </div>
                </div>
                <div class="opt">
                    <img src="../content/default/image/zk/up.png" alt="">
                    <img style="display: none;" src="../content/default/image/zk/open.png" alt="">
                </div>
            </div>
            <div class="table">
                <div class="clear tableTop">
                    <a class="btn_rau sub-btn">导 出</a>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" name="" id="">选择
                            </th>
                            <th>隐患图片</th>
                            <th>检查单位&nbsp;|&nbsp;检查时间</th>
                            <th>状态<img src="../content/default/image/zk/sort.png"></th>
                            <th>隐患描述</th>
                            <th>所属单位</th>
                            <th>隐患类别</th>
                            <th>隐患级别<img src="../content/default/image/zk/sort.png"></th>
                            <th>流程</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="checkbox" name="" id=""></td>
                            <td><img src="../content/default/image/zk/hidden1.gif"></td>
                            <td>
                                <p>山东淄博川区黄家辅二标项目经理部</p>
                                <p class="time">2019-12-12</p>
                            </td>
                            <td>
                                <p class="red">待整改</p>
                            </td>
                            <td>
                                <p>油漆桶摆放位置不符合要求</p>
                            </td>
                            <td>
                                <p>山东淄博川区黄家辅二标项目经理部</p>
                            </td>
                            <td>
                                <p>文明施工</p>
                            </td>
                            <td>
                                <p class="red">重大隐患</p>
                            </td>
                            <td>
                                <button class="blue">查看</button>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" name="" id=""></td>
                            <td><img src="../content/default/image/zk/hidden1.gif"></td>
                            <td>
                                <p>山东淄博川区黄家辅二标项目经理部</p>
                                <p class="time">2019-12-12</p>
                            </td>
                            <td>
                                <p class="orange">待验收</p>
                            </td>
                            <td>
                                <p>油漆桶摆放位置不符合要求</p>
                            </td>
                            <td>
                                <p>山东淄博川区黄家辅二标项目经理部</p>
                            </td>
                            <td>
                                <p>文明施工</p>
                            </td>
                            <td>
                                <p class="orange">一般隐患</p>
                            </td>
                            <td>
                                <button>查看</button>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" name="" id=""></td>
                            <td><img src="../content/default/image/zk/hidden1.gif"></td>
                            <td>
                                <p>山东淄博川区黄家辅二标项目经理部</p>
                                <p class="time">2019-12-12</p>
                            </td>
                            <td>
                                <p class="gray">已关闭</p>
                            </td>
                            <td>
                                <p>油漆桶摆放位置不符合要求</p>
                            </td>
                            <td>
                                <p>山东淄博川区黄家辅二标项目经理部</p>
                            </td>
                            <td>
                                <p>文明施工</p>
                            </td>
                            <td>
                                <p class="orange">一般隐患</p>
                            </td>
                            <td>
                                <button>查看</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div id="pages"></div>
            </div>
        </div>

    </div>
    <script src="../content/common/laydate/laydate.js"></script>
    <script src="../content/common/layui/layui.js"></script>
    <script src="../content/common/jquery-3.3.1.min.js"></script>
    <script src="../content/common/nicescroll.min.js"></script>
    <script>
        layui.use('tree', function () {
            var tree = layui.tree;

            //渲染
            var inst1 = tree.render({
                elem: '#tree' //绑定元素
                ,
                data: [{
                    title: '中国华电集团有限公司（23）' //一级菜单
                        ,
                    spread: true,
                    children: [{
                        title: '华电煤业集团有限公司（2）' //二级菜单
                            ,
                        children: [{
                            title: '三级菜单' //三级菜单
                            //…… //以此类推，可无限层级
                        }]
                    },{
                        title: '中国华电集团浙江分公司（5）' //二级菜单
                            ,
                        children: [{
                            title: '杭州华电半山发电有限公司' //三级菜单
                            //…… //以此类推，可无限层级
                        }]
                    },{
                        title: '中国华电科工集团有限公司（7）' //二级菜单
                            ,
                        children: [{
                            title: '三级菜单' //三级菜单
                            //…… //以此类推，可无限层级
                        }]
                    }]
                }]
            });
        });
        laydate.render({
            elem: '#startTime' //指定元素
        });
        laydate.render({
            elem: '#endTime' //指定元素
        });

        layui.use('laypage', function () {
            var laypage = layui.laypage;

            //执行一个laypage实例
            laypage.render({
                elem: 'pages' //注意，这里的 test1 是 ID，不用加 # 号
                    ,
                count: 50 //数据总数，从服务端得到
            });
        });
        let openFilter = true
        $('.opt').click(function () {
            if (openFilter) {
                $('.filter-section > dl').hide()
                $('.opt img').eq(0).hide()
                $('.opt img').eq(1).show()
                $('.filter-title-section').show()
            } else {
                $('.filter-section > dl').show()
                $('.opt img').eq(1).hide()
                $('.opt img').eq(0).show()
                $('.filter-title-section').hide()
            }
            openFilter = !openFilter
        })
        $('.addClick dd').click(function () {
            $(this).addClass('active').siblings().removeClass('active')
        })
        $(function(){
            $('#tree').niceScroll({
                autohidemode: false,
                cursorcolor:'#c9c9c9'
            });
            $('.listTab_ul li').click(function(){
                $(this).addClass('active').siblings().removeClass('active')
            })
        })
    </script>
</body>

</html>